<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星座判断</title>
	<style>
		*{margin:0;padding:0}
		.search-box{
			width: 500px;
			height: 50px;
			margin:100px auto 0;
			border: 1px solid red;
			background-color: pink;
			text-align: center;
			line-height: 50px;
		}
		.xingzuo-detail{
			text-align: center;
		}
	</style>
	<script src="vue.js"></script>
</head>
<body>
	<div id="demo">
		<div class="search-box">
			请输入您的星座：
			<input type="text" id="xingzuo" v-model="xingzuoming">
			<input type="button" value="确定" @click="query">
		</div>
		<div class="xingzuo-detail" v-html="xingzuodetail"></div>
	</div>
	<script>
	new Vue({
		el:'#demo',
		data:{
			xingzuoming:'',
			xingzuodetail:''
		},
		methods:{
			query:function(){
				switch(this.xingzuoming){
					case '水瓶座':
						this.xingzuodetail="<img src='images/12/shuiping.png'>";
						break;
					case '狮子座':
						this.xingzuodetail="<img src='images/12/shizi.png'>";
						break;
					case '处女座':
						this.xingzuodetail="<img src='images/12/chunv.png'>";
						break;
					case '天蝎座':
						this.xingzuodetail="<img src='images/12/tianxie.png'>";
						break;
					case '白羊座':
						this.xingzuodetail="<img src='images/12/baiyang.png'>";
						break;
					case '金牛座':
						this.xingzuodetail="<img src='images/12/金牛.png'>";
						break;
					case '天秤座':
						this.xingzuodetail="<img src='images/12/tiancheng.png'>";
						break;
					default:
						this.xingzuodetail = '请输入正确的星座，例如：狮子座，天蝎座等';
				}
			}
		}
	});
	</script>
</body>
</html>